import { targetStatisticsCues } from '@/services/api/api-brain-cues-analysis';
import { TinyArea, TinyColumn } from '@ant-design/charts';
import { ClockCircleOutlined, EllipsisOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-card';
import { Divider, Dropdown, MenuProps, Radio, Skeleton, Space, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TargetTotalCardProps { }

const TargetTotalCard: React.FC<TargetTotalCardProps> = ({ }) => {
    const [dataTargetTotal, setDataTargetTotalState] =
        useState<CuesAnalysisData.TargetCuesAnalysisTotal>();
    const [loading, setLoading] = useState(false);
    const currentYear = new Date().getFullYear();

    const [dataTabSelectDay, setDataTabSelectDayState] = useState<number>(currentYear);
    const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        loadTargetTotalData(currentYear)
        setDataTabSelectDayState(currentYear)
    };

    const handleMenuClick: MenuProps['onClick'] = (e) => {
        console.log(e.key);
        setLoading(true)
        loadTargetTotalData(Number(e.key))
        setDataTabSelectDayState(Number(e.key))
    };

    const items: MenuProps['items'] = [
        {
            label: '今年',
            key: currentYear,
            icon: <ClockCircleOutlined />,
        },
        {
            label: '去年',
            key: currentYear - 1,
            icon: <ClockCircleOutlined />,
        },
        {
            label: '前年',
            key: currentYear - 2,
            icon: <ClockCircleOutlined />,
        },
    ];

    const menuProps = {
        items,
        onClick: handleMenuClick,
    };
    /**
     * 宣传刊播
     * @param key
     */
    const loadTargetTotalData = async (day: number) => {
        try {
            const response = await targetStatisticsCues({ day: -day });
            if (response.code === 0) {
                setDataTargetTotalState(response.data);
            }
            setLoading(false)
        } catch (error) { }
    };
    useEffect(() => {
        loadTargetTotalData(dataTabSelectDay);
    }, []);

    return (
        <>
            {dataTargetTotal ? (
                <Spin spinning={loading}>
                    <StatisticCard
                        title="年度统计"
                        style={{ backgroundColor: '#F6F7FB' }}
                        tooltip="年度发布总计"
                        extra={<>
                            <Dropdown.Button menu={menuProps} onClick={handleButtonClick} >
                                今年
                            </Dropdown.Button>
                        </>}
                        chart={
                            <>
                                <div >
                                    <h2 >年选题计划 {dataTargetTotal?.countTopic} 个</h2>
                                    <h2 style={{marginBottom:13}}>年选题报送 {dataTargetTotal?.countSubmit} 条</h2>
                                </div>
                            
                                <Divider />
                                <Space>
                                    <StatisticCard.Statistic
                                        title="线索同比"
                                        value={Math.abs(dataTargetTotal?.submitTrendCount) + ' '}
                                        trend={dataTargetTotal?.submitTrendCount > 0 ? 'up' : 'down'}
                                    />
                                    <StatisticCard.Statistic
                                        title="计划同比"
                                        value={Math.abs(dataTargetTotal?.topicTrendCount) + ' '}
                                        trend={dataTargetTotal.topicTrendCount > 0 ? 'up' : 'down'}
                                    />
                                </Space>
                            </>
                        }
                    />

                </Spin>
            ) : (
                <StatisticCard title="年度统计" extra={<EllipsisOutlined />}>
                    <Skeleton active />
                </StatisticCard>
            )}
        </>
    );
};

export default TargetTotalCard;
